<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div class="fu">
          <div>
            <!-- 搜索框 -->
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="关键字">
                <el-input
                  v-model="formInline.user"
                  placeholder="根据文章标题搜索"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select
                  v-model="formInline.region"
                  placeholder="请选择"
                  @change="handleSState"
                >
                  <el-option
                    v-for="item in stateChange"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>

                  <!-- <el-option label="禁用" value="beijing"></el-option> -->
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="small" @click="empty">清空</el-button>
                <el-button type="primary" size="small" @click="onSubmit"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <!-- 新增技巧 -->
          <div>
            <el-button type="success" size="small" @click="handleAdd">
              <i class="el-icon-edit"></i>
              <span>新增技巧</span>
            </el-button>
          </div>
        </div>

        <!-- 提示框 -->
        <el-alert :title="alertText" type="info" show-icon class="tishi" :closable="false">
        </el-alert>

        <!-- 表格 -->
        <el-table
          :data="tableData"
          class="bgc"
          :header-cell-style="{ background: '#FAFAFA' }"
          style="width: 100%"
          v-loading = "loading"
        >
          <el-table-column
            type="index"
            :index="indexMethod"
            label="序号"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="title" label="文章标题" width="180">
            <!-- {{tableData.title}} -->
            <!-- <rideosrc></rideosrc> -->
            <template slot-scope="scope">
              <div class="cell">
                {{ scope.row.title }}
                <!-- <p>{{scope.row.videoURL}}</p> -->
                <!-- {{scope.row.videoURL}} -->
                <span v-show="scope.row.videoURL ? true : false">
                  <!-- 视频按钮 -->
                  <a
                    href="#"
                    class="el-icon-film"
                    @click.prevent="handlePlay(scope.row)"
                  ></a>
                  <!-- <video src="{scope.row.videoURL}"  controls></video> -->
                </span>
              </div>

              <!-- 播放视频帷幕 -->
              <!-- <div class="video-preview" v-show="curtain">
                <div class="close">
                  <span class="el-icon-close"></span>
                </div>
              </div> -->

              <!-- :formatter="formattingTime" -->
            </template>
          </el-table-column>
          <el-table-column prop="visits" label="阅读数"> </el-table-column>
          <el-table-column prop="username" label="录入人"> </el-table-column>
          <el-table-column prop="createTime" label="录入时间">
            <template #default="{ row }">
              {{ row.createTime | parseTimeByString }}
            </template>
            <!-- {{formattingTime | formatDate}} -->
            <!-- {{formattingTime}} -->
            <!-- {{formattingTime(cellValue)}} -->
          </el-table-column>
          <el-table-column prop="state" label="状态" :formatter="handleState">
          </el-table-column>
          <!-- 按钮 -->
          <el-table-column label="操作">
            <template #default="{ row }">
              <!-- {{row}} -->
              <el-button type="text" @click="view(row)">预览</el-button>

              <!-- 禁用启用按钮 -->
              <el-button type="text" @click="IdState(row)">{{
                row.state ? "开启" : "禁用"
              }}</el-button>

              <!-- 修改按钮 -->
              <el-button
                type="text"
                :disabled="row.state === 1"
                @click="handleEditor(row.id)"
                >修改</el-button>
              <!-- 删除按钮 -->
              <el-button
                type="text"
                :disabled="row.state === 1"
                @click="handleDel(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block" v-show="handleHidden">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5,10, 15, 20]"
            :page-size="pagesize"
            layout=" prev, pager, next, sizes,jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>

      <!-- 添加/修改弹框 -->
      <articlesAdd ref="control" @add="addsKills"></articlesAdd>

      <!-- 预览弹框 -->
      <articlesPreview ref="see" :cont="previewData"></articlesPreview>

      <!-- 播放视频帷幕 -->
      <div class="video-preview" v-show="curtain">
        <!-- 叉 -->
        <div class="close" @click="fork">
          <span class="el-icon-close"></span>
        </div>
        <!-- 主体 -->
        <div class="box">
          <video :src="play" autoplay controls></video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  list,
  remove,
  detail,
  changeState,
  simple
} from '@/api/hmmm/articles.js'
import articlesAdd from '@/module-hmmm/components/articles-add'
import articlesPreview from '@/module-hmmm/components/articles-preview'
// import BaseApi from '@/api/base/baseApi.js'
import { status as Status } from '@/api/hmmm/constants.js'
// import dayjs from 'dayjs'
export default {
  name: 'Articles',
  components: {
    articlesAdd,
    articlesPreview
  },
  data () {
    return {
      // 加载圈
      loading: false,
      formInline: {
        user: '',
        region: ''
      },
      // 表格
      tableData: [],
      // 当前页
      page: 1,
      // 每页多少条
      pagesize: 10,
      // 关键字
      keyword: '',
      // 状态
      state: '',
      // 总条数
      total: 1,
      // id
      articleId: '',
      // 存储预览对象
      previewData: {},
      // 下拉框状态
      stateChange: [],
      // 帷幕
      curtain: false,
      // 存放小视频
      play: '',
      // 储存寻找到的数据
      storeData: [],
      // 储存时间
      storeTiem: '',
      // 分页的显示隐藏
      handleHidden: true
    }
  },
  created () {
    // 列表
    this.reqList()
    // 状态
    // this.changeStateHandle()
    // 简单列表
    // this.reqSimple()
    // 枚举，解构出来状态
    this.enumeration()
  },
  computed: {
    // 提示框，条数
    alertText () {
      return `总共${this.total}条技巧`
    }
  },
  methods: {
    // 查询按钮
    onSubmit () {
      this.loading = true
      // 发送请求
      setTimeout(() => {
        this.reqList()
      }, 200)

      setTimeout(() => {
        // 设置页面为一
        this.page = 1
        // 根据目录名称和状态找对应的内容
        // 方法三
        if (this.formInline.region && this.formInline.user) {
          if (this.formInline.user === 1) {
            const arr3 = this.tableData.filter((item) => {
              return item.title.indexOf(this.formInline.user) !== -1 && item.state === this.formInline.region === 1
            })
            this.tableData = [...arr3]
            this.loading = false
            return
          } else {
            const arr4 = this.tableData.filter((item) => {
              return item.title.indexOf(this.formInline.user) !== -1 && item.state === this.formInline.region === 0
            })
            this.tableData = [...arr4]
            this.loading = false
            return
          }
        }

        // 只搜索文章标题
        if (this.formInline.user) {
          // 找到用目录名称相同的对象
          const arr1 = this.tableData.filter(
            (item) => item.title.indexOf(this.formInline.user) !== -1
          )
          console.log(arr1)
          this.tableData = [...arr1]
          this.total = arr1.length
          this.loading = false
          return
        }
        // 只搜索状态
        if (this.formInline.region === 1 || this.formInline.region === 0) {
          // 找到所有启用或禁用的状态
          const arr2 = this.tableData.filter(
            (item) => item.state === this.formInline.region
          )
          console.log(arr2, '00')
          this.tableData = [...arr2]
          this.loading = false
        }
        // })
      }, 400)
      this.handleHidden = false
    },
    // 获取文章列表
    async reqList (value) {
      const { data } = await list(value)
      // console.log(data, '=-==')
      // console.log(items)
      // 将数据放到tableData中
      this.tableData = data.items
      console.log(this.tableData, '0-0-0')
      // console.log(this.tableData.id)
      this.total = data.counts
    },
    // 序号
    indexMethod (index) {
      return index * 1 + 1
    },
    // 每页条数
    handleSizeChange (val) {
      this.pagesize = val
      this.reqList({ pagesize: val, page: this.page })
    },
    // 当前页数
    handleCurrentChange (val) {
      // console.log(val, '--')
      this.page = val
      // console.log(this.page, '====')
      // 发送请求
      // this.reqList({ page: this.page })
      this.reqList({ page: val, pagesize: this.pagesize })
    },
    // 点击新增按钮
    handleAdd () {
      // 控制弹窗的显示
      this.$refs.control.dialogFormVisible = true
    },
    // 跟新添加数据
    addsKills () {
      this.reqList()
    },
    // 删除按钮
    handleDel (id) {
      this.$confirm('确认删除？', '温馨提示', { type: 'warning' }).then(
        async () => {
          console.log(id, '000')
          const res = await remove({ id })
          // console.log(res, '=-00')
          console.dir(res, '888')
          this.$message.success('删除成功')
          this.reqList()
        }
      )
    },
    // 点击修改
    async handleEditor (id) {
      this.$refs.control.dialogFormVisible = true
      console.log(id)
      const res = await detail({ id })
      console.log(res, '--999---')
      // 数据回显
      this.$refs.control.form = res.data
      console.log(this.$refs.control.form, '09099')
    },
    // 点击预览
    view (data) {
      console.log(data, '09090')
      this.previewData = data
      this.$refs.see.dialogFormVisible = true
    },
    // 状态
    handleState (row, column, cellValue, index) {
      return cellValue === 0 ? '已开启' : '已禁用'
      // 运用枚举
      /* // 将状态从BaseApi解构出来
      const { status } = BaseApi
      // 遍历将对应的状态拿出来
      const obj = status.find(item => item.id === +cellValue)
      return obj ? obj.value : '状态未知' */
    },
    // 按钮状态
    async IdState (row) {
      console.log(row.state)
      // 切换状态，所以要发生变化
      if (row.state === 0) {
        row.state = 1
      } else {
        row.state = 0
      }
      // 发起请求，获取状态
      await changeState({ id: row.id, state: row.state })
      this.$message.success('操作成功')
    },
    // 获取简单列表
    reqSimple () {
      const res = simple()
      console.log(res, '111')
    },
    // 枚举解构状态
    enumeration () {
      // const { status } = BaseApi
      // console.log(status, '090000')
      this.stateChange = [...Status]
      // this.stateChange = { ...status }
      console.log(this.stateChange, '888')
    },
    /* enumeration () {
      const sbabb = Status
      console.log(sbabb, '1211')
    }, */
    // 点击下拉框
    handleSState (val) {
      console.log(val)
    },
    // 格式化时间
    // formattingTime (row, column, cellValue, index) {
    //   // console.log(row, column, cellValue, index)
    //   /* // 从下标0开始截取到下标10
    //   const data1 = cellValue.slice(0, 10)
    //   // 从下标11开始截取到下标19
    //   const data2 = cellValue.slice(11, 19)
    //   // 拼接
    //   const data3 = data1 + '' + data2
    //   return data3 */
    //   const data4 = cellValue | this.formattingTime
    //   console.log(data4)
    //   // this.storeTiem = data4
    //   // console.log(this.storeTiem)
    //   // return cellValue
    // },
    // 点击小视频
    handlePlay (row) {
      this.play = row.videoURL
      console.log(this.play)
      this.curtain = true
    },
    // 点击叉号
    fork () {
      this.curtain = false
    },
    // 清空表单
    empty () {
      this.formInline = {
        user: '',
        region: ''
      }
      this.reqList()
      this.handleHidden = true
    }
  }
}
</script>

<style lang="scss" scoped>
.fu {
  display: flex;
  justify-content: space-between;
}
.tishi {
  // background-color: red;
  margin-bottom: 20px;
}
.block {
  text-align: right;
  margin-top: 30px;
}
.cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  padding-right: 10px;
  .el-icon-film {
    color: #00f;
    font-size: 18px;
  }
}

.video-preview {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
  .close {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    background: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    z-index: 1;
  }
  .box {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    // -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%, -50%);
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
